<template>
  <hm-layout :page-info="{ toolId, name: pageConfig.tool_name, desc: pageConfig.tool_desc }">
    
    <el-progress style="width: 100vw;" v-show="downloadPercent" :percentage="downloadPercent" />
    <view class="plugin-container">

      <view class="drag-tips">
        <text>tips: </text>
        <text style="color: rgb(252, 69, 69);">预览图可以拖拽文字进行排版哦!</text>
      </view>
      
      <view id="box" :style="`width:${boxWidth}px;height:${boxHeight}px;`">
        <view id="capture" :style="`width:${boxWidth}px;height:${boxHeight}px;`">
          <img v-drag="{
            maxX: boxWidth * 2,
            minX: -boxWidth,
            minY: -boxHeight,
            maxY: boxHeight * 2
          }" v-show="renderDecoration" :style="`width:${boxWidth}px;`" crossorigin="anonymous" class="decoration"
            :src="renderDecoration" />
          <view class="grid" v-show="isShowGrid" :style="`
              width:${boxWidth}px;
              height:${boxHeight}px;
              grid-template-columns: ${gridClumn};
              grid-template-rows: ${gridRow};
              `">
            <view class="circle" :style="`width:${boxWidth}px;height:${boxHeight}px;`"></view>
            <view class="grid-item" v-for="i in Math.max(boxWidth, boxHeight)" :key="i"></view>
          </view>
          <div ref="main" class="main-text" v-drag="{
            maxX: boxWidth + (mainFontSize / 2),
            minX: -(mainFontSize / 2),
            minY: 0,
            maxY: boxHeight
          }" :style="`
              color: ${mainColor};
              position: absolute;
              font-size: ${mainFontSize}px;
              line-height: 1px;
              font-family: ${mainFontFamily};
              font-weight: ${checked.includes('main') ? 'bold' : 'normal'};
              `">
            {{ renderMainText }}
          </div>
          <div ref="sub" v-drag="{
            maxX: boxWidth,
            minX: 0,
            minY: 0,
            maxY: boxHeight
          }" class="sub-text" :class="{ 'sub-text_bg': showSubBg }" :style="`
              ${showSubBg ? 'width:' + boxWidth + 'px' : ''};
              ${showSubBg && !isHorizontal ? 'max-width:' + subFontSize + 'px;' : ''}
              writing-mode: ${isHorizontal ? 'horizontal-tb' : 'vertical-rl'};
              color: ${subColor};
              position: absolute;
              font-size: ${subFontSize}px;
              ${isHorizontal ? 'line-height: 1px;' : ''}
              font-family: ${subFontFamily};
              font-weight: ${checked.includes('sub') ? 'bold' : 'normal'};
              letter-spacing:${subLetterSpacing}px;
              line-height:${subLineHeight}px;
            `" v-show="checked.includes('idiom')">{{ renderSubText }}</div>
        </view>
      </view>

      <view class="form-container">
        <view class="box-placeholder" :style="`width:${boxWidth + 20}px;height:${boxHeight + 20}px;`"></view>
        <el-form class="forms" :inline="true" :label-width="100">
          <view style="width: 100%;text-align: center;font-weight: bold;margin: 10rpx 0;color: #f31c1c">基础底图</view>
          <el-upload style="width: 80%;margin: 10px auto;" drag action="" :auto-upload="true" :http-request="afterRead"
            list-type="text" :show-file-list="false" ref="uploadRef">

            <view class="upload-content-text">
              <em>{{ renderDecoration ? '点击/拖拽-替换底图' : '点击/拖拽-上传底图' }}</em>
              <view style="color: #333;font-size: 12px;">建议图片宽高比1:1</view>
            </view>
          </el-upload>
          <view style="width: 100%;text-align: center;font-weight: bold;margin: 10rpx 0;color: #f31c1c">自定义谐音词</view>

          <el-form-item>
            <el-upload v-model:file-list="fileList2" action="" :limit="1" accept=".txt"
              :http-request="uploadFile2">
              <template #trigger>
                <el-button type="primary">点击上传谐音词</el-button>
              </template>
            </el-upload>

          <div style="margin: 10rpx 20rpx;">
            <view style="color:#f31c1c;">
              tips: 仅支持txt文件,格式参考：
            </view>
            <view style="padding: 10rpx;color: rgb(51, 51, 51, 0.7);border:1px solid #ddd;line-height: 24rpx;">董-怦然心董<br>
            杜-共杜一生<br>
            伦-无与伦比</view>
          </div>
          </el-form-item>
          

          <view style="width: 100%;text-align: center;font-weight: bold;margin: 10rpx 0;color: #f31c1c">画布大小</view>
          <el-row>
            <el-col :span="24">
              <el-form class="flex-space">
                <el-form-item name="图片宽度" label="图片宽度">
                  <el-input-number :min="500" @change="() => {}" :step="1" style="width: 140px;" v-model="boxWidth" />
                </el-form-item>

                <el-form-item name="图片高度" label="图片高度">
                  <el-input-number :min="500" @change="() => {}" :step="1" style="width: 140px;" v-model="boxHeight" />
                </el-form-item>
              </el-form>
            </el-col>
            <view style="width: 100%;text-align: center;font-weight: bold;margin: 10rpx 0;color: #f31c1c">内容控制</view>
            <el-col :span="12">
              <el-form-item name="姓氏" label="姓氏" type="digit" autosize>
                <el-input type="text" v-model="renderMainText" />
              </el-form-item>
              <el-form-item name="姓氏字号" label="姓氏字号" type="digit" autosize>
                <el-input type="number" v-model="mainFontSize" />
                <el-slider style="width:160rpx" :min="12" :max="400" v-model="mainFontSize" />
              </el-form-item>
              <el-form-item name="姓氏字体" label="姓氏字体">
                <el-select @change="() => loadFonts(mainFontFamily)" filterable allow-create v-model="mainFontFamily"
                  placeholder="选择字体" class="m-2" size="large">
                  <el-option v-for="item in fontFamilyoptions" :key="item.value" :label="item.label"
                    :value="item.value" />
                </el-select>
              </el-form-item>

              <el-form-item name="姓氏颜色" label="姓氏颜色">
                <el-color-picker show-alpha v-model="mainColor" />
              </el-form-item>

              <el-form-item name="显示参考线" label="显示参考线">
                <el-switch v-model="isShowGrid"></el-switch>
              </el-form-item>

              <el-form-item>
                <el-checkbox-group style="margin: 0 40rpx;display: flex;flex-direction: column;" v-model="checked"
                  shape="square">
                  <el-checkbox label="main">姓氏文案加粗</el-checkbox>
                  <el-checkbox label="sub">谐音词加粗</el-checkbox>
                  <el-checkbox label="idiom">是否使用谐音词</el-checkbox>
                </el-checkbox-group>
              </el-form-item>
              <view style="margin: 10rpx;font-size: 12px;line-height:12px;color: rgb(252, 69, 69);">
                可在【字体选择框】中输入系统自带的字体，如“cursive”
              </view>
              <view>
                <el-upload v-model:file-list="fileList" action="" multiple :limit="5" accept=".ttf,.otf,.woff,.woff2"
                  :http-request="uploadFile">
                  <template #trigger>
                    <el-button type="primary">选择本地字体</el-button>
                  </template>

                  <template #tip>
                    <div class="el-upload__tip">
                      仅支持ttf、otf、woff 和 woff2类型文件
                    </div>
                  </template>
                </el-upload>
              </view>
            </el-col>
            <el-col :span="12">
              <el-form-item name="谐音词" label="谐音词" type="digit" autosize>
                <el-input type="text" v-model="renderSubText" />
              </el-form-item>
              <el-form-item name="谐音词字号" label="谐音词字号">
                <el-input type="number" v-model="subFontSize" />
                <el-slider style="width:160rpx" :min="12" :max="400" v-model="subFontSize" />
              </el-form-item>
              <el-form-item name="谐音词字体" label="谐音词字体">
                <el-select filterable @change="() => loadFonts(subFontFamily)" allow-create="true" v-model="subFontFamily"
                  placeholder="选择字体" class="m-2" size="large">
                  <el-option v-for="item in fontFamilyoptions" :key="item.value" :label="item.label"
                    :value="item.value" />
                </el-select>
              </el-form-item>

              <el-form-item name="谐音词颜色" label="谐音词颜色">
                <el-color-picker v-model="subColor" />
              </el-form-item>
              <el-form-item name="谐音词间距" label="谐音词间距">
                <el-input type="number" v-model="subLetterSpacing" />
                <el-slider style="width:160rpx" :min="0" :max="80" v-model="subLetterSpacing" />
              </el-form-item>
              <el-form-item name="谐音词行高" label="谐音词行高">
                <el-input type="number" v-model="subLineHeight" />
                <el-slider style="width:160rpx" :min="0" :max="80" v-model="subLineHeight" />
              </el-form-item>
              <el-form-item name="开启背景条" label="开启背景条">
                <el-switch v-model="showSubBg"></el-switch>
              </el-form-item>

              <el-form-item name="横向谐音词" label="横向谐音词">
                <el-switch v-model="isHorizontal"></el-switch>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>


        <view class="bottom">          
          <view class="btns">
            <el-button class="operate-button" round type="danger" @click="showTips" size="large">【点我查看重要提示】</el-button>
            <el-button class="operate-button" round plain type="success" size="large" @click="download(0)"
              :loading="isShowLoading" :disabled="!hadViewTips">测试效果(15张)</el-button>
            <el-button class="operate-button" round plain type="primary" size="large" @click="download(1)"
              :loading="isShowLoading" :disabled="!hadViewTips">下载1张</el-button>
            <el-form-item style="margin: 20rpx 0 0;" label="自定义数量">
              <el-input :min="0" type="number" v-model="downloadNumber" />
            </el-form-item>
            <el-button class="operate-button" round type="success" size="large" @click="download(2)"
              :loading="isShowLoading" :disabled="!hadViewTips">生成{{downloadNumber}}张姓氏图片</el-button>
            <el-button class="operate-button" round type="primary" size="large" @click="download(3)"
              :loading="isShowLoading" :disabled="!hadViewTips">生成全部姓氏图片</el-button>
            <el-button class="operate-button" round plain type="warning" size="large" @click="() => renderDecoration = ''">清除底图</el-button>
          </view>
          
          <view class="card-container">
            <el-card :body-style="{ padding: '0px' }">
              <img
                src="https://mp-f94b3c95-ea57-45eb-aad5-8365caef5925.cdn.bspapp.com/avatar-client/images/service_qrcode.png"
                class="image" style="width: 100%;border-radius: 4px;" />
              <view style="padding: 14px">
                <view style="text-align: center;">微信扫码加入交流群</view>
              </view>
            </el-card>
          </view>
        </view>

        <view class="btn-container">
          <view style="color: #ff2b2b;font-size: 14px;margin: 10px auto;font-weight: bold;">
            制作底图前，请点击查看重要提示并按照提示进行前置的设置！！！
            <EditDialog btnText="查看视频教学" width="70%" :isHandleButton="true">
              <video style="width: 100%;height: 600px;"
                src="https://mp-c3603e48-468f-4859-9888-0b616ac21d6c.cdn.bspapp.com/haimi-ai/learn.mp4"></video>
            </EditDialog>
          </view>
        </view>
      </view>
    </view>
  </hm-layout>
  <VipPopup :config="pageConfig.price_config" tool-id="ai_underlay" v-model="vipIsShow" />
  <TipsPopup v-model="tipsVisible" />
</template>

<script lang="ts" setup>
import { ref, onBeforeMount, computed } from "vue";
import html2canvas from "html2canvas";
import { constantSurMap } from './contant';
import VipPopup from '@/common/components/hm-vip-popup/index.vue';
import EditDialog from '@/common/components/EditDialog/index.vue'
import TipsPopup from './components/tips-popup.vue';
const vk = uni.vk;
let surMap = constantSurMap;

const toolId = 'ai_underlay';

const pageConfig = ref({
  tool_name: "底图批量生成工具",
  tool_desc: "上传一张空白底图，批量帮你填充姓氏和谐音词，省时高效",
  price_config: []
})

onBeforeMount(async () => {
  hadViewTips.value = localStorage.getItem(toolId);
  vk.callFunction({
    url: 'ai-client/common/pub/getConfig',
    title: '请求中...',
    data: {},
    success: (res) => {
      const underlayConfig = res.data.find(conf => conf.tool_id === toolId);
      console.log('underlayConfig', underlayConfig, res.data);
      pageConfig.value = underlayConfig || {};
    }
  });
})

const vipIsShow = ref(false);

const showVipPopup = () => {
  vipIsShow.value = true;
}

const tipsVisible = ref(false);
const hadViewTips = ref('');
const showTips = () => {
  hadViewTips.value = 'true';
  localStorage.setItem(toolId, 'true');
  tipsVisible.value = true;
};

const uploadRef = ref()

const afterRead = (files: any) => {
  uploadRef.value!.clearFiles()	//该方法就是清理上传列表
  const reader = new FileReader();
  reader.readAsDataURL(files.file);
  reader.onloadend = function () {
    renderDecoration.value = reader.result as string;
  }
};

const baseUrl = 'https://mp-f94b3c95-ea57-45eb-aad5-8365caef5925.cdn.bspapp.com/avatar-client/font/'
const defaultFontFamilyList = [
  {
    label: '华文楷体',
    value: '华文楷体',
  },
  {
    label: '华文行楷',
    value: '华文行楷',
  },
  {
    label: 'Aa后浪行楷',
    value: 'Aa后浪行楷',
  },
  {
    label: '汉仪秀英体简',
    value: '汉仪秀英体简',
  },
  {
    label: '汉仪糯米团',
    value: '汉仪糯米团',
  },
  {
    label: '锐字温帅小可爱简',
    value: '锐字温帅小可爱简',
  },
  {
    label: '汉仪小公姓氏体',
    value: '汉仪小公姓氏体',
  },
  {
    label: '鸿雷板书简体',
    value: '鸿雷板书简体',
  },
  {
    value: undefined,
    label: '更多字体请扫码查看！',
  },
];
const fontFamilyoptions = ref(defaultFontFamilyList);

const boxWidth = ref(500);
const boxHeight = ref(500);

const gridRow = computed(() => {
  const grid = new Array(Math.round(boxHeight.value / 50)).fill('49px ').join('')
  return grid;
})
const gridClumn = computed(() => {
  const grid = new Array(Math.round(boxWidth.value / 50)).fill('49px ').join('')
  return grid;
})

const inputMainText = ref(surMap.map(i => i.sur));
const renderMainText = ref('李');
const mainFontSize = ref(238);
const mainFontFamily = ref('');
const mainColor = ref('#000000');

const subColor = ref('#000000');
const renderSubText = ref('一生有李');
const subFontSize = ref(42);
const subFontFamily = ref('');
const subLetterSpacing = ref(0);
const subLineHeight = ref(42);
const subWidth = ref(500);
const showSubBg = ref(false);
const isHorizontal = ref(true);

const checked = ref(['idiom']);

const loadFonts = (fontFamily) => {
  const style = document.createElement('style');
  style.innerHTML = `@font-face {font-family: ${fontFamily}; src: url(${baseUrl}${fontFamily}.ttf);}`;
  document.head.appendChild(style);
}

const renderDecoration = ref('');
const isShowLoading = ref(false);
const downloadPercent = ref(0);
const downloadNumber = ref(500);

const downloadAction = (sur: string) => {
  const idiom = surMap.find(i => i.sur === sur)?.idiom || '';

  renderMainText.value = sur;
  renderSubText.value = idiom;
  return new Promise((resolve) => {
    setTimeout(async () => {
      const canvas: HTMLCanvasElement = await html2canvas(document.querySelector('#capture') as HTMLElement);

      let a = document.createElement('a');
      // 将 canvas 方法返回一个包含图片展示的 data URI.可以使用 type
      // 参数其类型,默认为PNG 格式。图片的分辨率为96dpi.
      a.href = canvas.toDataURL('image/png', 1.0);

      a.download = `${sur}`;
      //将 a 标签插入到页面中
      document.body.appendChild(a);
      //download 下载图片

      // 模拟a标签的点击事件
      a.click();
      document.body.removeChild(a);
      resolve(a.download);
    }, 100);
  })
}

const p = function (s: string) {
  return new Promise((resolve) => {
    downloadAction(s).then(() => resolve(s))
  })
};

const checkVip = (): Promise<boolean> => {
  return new Promise((resolve, reject) => {
    vk.callFunction({
      url: 'user/kh/getMyToolInfos',
      title: '请求中...',
      data: {},
      success: (res) => {
        const toolInfoList = res.toolInfo;
        if (!toolInfoList || !toolInfoList.length) {
          resolve(false);
        } else {
          // 过滤当前tool_id且未过期
          const tool = toolInfoList.find(item => (item.tool_id === toolId && !item.vipExpire));
          resolve(!!tool);
        }
      },
      fail() {
        resolve(false);
      }
    });
  })
}

const isShowGrid = ref(true)
/** type: 0.测试，1.1张 2.自定义 3.所有 */
const download = async (type: number) => {
  let count = 1;
  switch (type) {
    case 0:
      count = 15;
      break;
    case 1:
    count = 1;
      break;
    case 2:
    count = downloadNumber.value;
      break;
    case 3:
    count = surMap.length;
      break;
    default:
      break;
  }
  const hadShowTips = localStorage.getItem(toolId);
  if (!hadShowTips) {
    vk.toast('请点击红色按钮查看【重要提示】后再进行下载！')
    return;
  }
  let is_vip = false;
  if (type !== 0 && type !== 1) {
    try {
      is_vip = await checkVip();
    } catch (err) {
      // pass
    }
    if (!is_vip) {
      showVipPopup();
      return;
    }
  }
  isShowLoading.value = true;
  isShowGrid.value = false;

  const cacheMainText = renderMainText.value;
  const cacheSubText = renderSubText.value;
  const textIndex = surMap.findIndex(i => (i.sur === renderMainText.value));
  if (textIndex !== -1) {
    surMap.splice(textIndex, 1);
  }
  // 加入用户输入文案与缓存当前展示的文案
  inputMainText.value.unshift(cacheMainText);
  surMap.unshift({
    sur: cacheMainText,
    idiom: cacheSubText,
    order: 0,
  })

  const inputMainTextList = inputMainText.value.slice(0, count);
  return new Promise((resolve) => {

    inputMainTextList.reduce(
      (async (pre: string, cur: string, index: number) => {
        await pre;
        if (index == inputMainTextList.length - 1) {
          await p(cur);
          resolve("all download!");
          downloadPercent.value = 0;
          isShowLoading.value = false;
          isShowGrid.value = true;
          renderMainText.value = '李';
          renderSubText.value = '一生有李';
          // 恢复数据
          renderMainText.value = cacheMainText;
          renderSubText.value = cacheSubText;
          inputMainText.value.shift();
          surMap.shift();
        } else {
          downloadPercent.value = Math.round(index / (inputMainTextList.length - 1) * 100);
          return p(cur);
        }
      }) as any,
      0
    );
  })
}

const fileList2 = ref([]);
const uploadFile2 = async (e) => {
	var reader = new FileReader();
	reader.onload = function () {
		const { result } = reader as { result: string };
		if (result) {
				const idiomList = result.split('\n');
				surMap = idiomList.map((item, index) => {
					const temList = item.split('-');
					return {
						sur: temList[0],
						idiom: temList[1],
						order: index + 1
					}
				});
        inputMainText.value = surMap.map(i => i.sur);
				console.log('idiomList', idiomList);
		}
	};
	reader.readAsText(e.file);
}

const fileList = ref([]);
const uploadFile = async (e) => {
  const { file } = e;
  const fontFamily = file.name.replace(/\.[^/.]+$/, '');
  try {
    const fileBase64 = await fileToBase64Async(file);
    const style = document.createElement('style');
    style.innerHTML = `@font-face {font-family: ${fontFamily}; src: url(${fileBase64});}`;
    document.head.appendChild(style);
  } catch (err) {
    vk.toast('字体加载失败，请重试或者换个字体试试吧！');
  }

  const customFonts = fileList.value.map((f) => {
    const name = f.name.replace(/\.[^/.]+$/, '');
    return { label: name, value: name };
  });
  fontFamilyoptions.value = [...customFonts, ...defaultFontFamilyList]
}

function fileToBase64Async(file) {
  return new Promise((resolve, reject) => {
    let reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = (e: any) => {
      resolve(e.target.result);
    };
  });
}
</script>
<style scoped lang='scss'>
.grid {
  left: 0;
  top: 0;
  position: absolute;
  display: grid;
  /* 三行，每行各自高为 50 像素 */
  grid-gap: 1px;
  /* 格子之间的空隙 */
}

.circle {
  position: absolute;
  left: 0;
  top: 0;
  border: 1px dashed #9f9f9f;
  border-radius: 50%;
}

.grid-item {
  background-color: transparent;
  border: 1px dashed #c5c5c5;
  text-align: center;
  font-size: 20px;
  height: 50px;
  width: 50px;
}


.content-header {
  margin-top: 40rpx;
  color: #834f1d;
  position: absolute;
  top: -200rpx;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;

  .tool-name {
    font-size: 54rpx;
    font-weight: bold;
  }

  .tool-desc {
    font-size: 24rpx;
  }
}

.plugin-container {
  width: 100%;
  overflow: scroll;
  .title {
    font-size: 22px;
    padding: 10px 0;
    text-align: center;
    width: 100vw;
  }
}

.card-container {
  width: 200px;
  margin: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.upload-content-text {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.box-placeholder {
  width: 520px;
  height: 560px;
}

#box {
  position: absolute;
  left: 10px;
  top: 40px;
  padding: 10px;
  border-radius: 8px;
  background: url(/static/base-image/border-bg.png) no-repeat;
  background-size: 100%;
  margin: 0 auto;
  box-shadow: 1px 1px 2px 1px #4ccdff40;

  &::before {
    position: absolute;
    top: 0;
    left: 50%;
    content: '';
    display: inline-block;
    width: 50%;
    height: 50%;
    background-color: transparent;
    border-left: 1px dotted #000;
    border-bottom: 1px dotted #000;
  }

  &::after {
    position: absolute;
    bottom: 0;
    left: 0;
    content: '';
    display: inline-block;
    width: 50%;
    height: 50%;
    background-color: transparent;
    border-top: 1px dotted #000;
    border-right: 1px dotted #000;
  }

  #capture {
    box-sizing: border-box;
    margin: auto;
    position: relative;
    background: #fff;
    overflow: hidden;
    z-index: 1;

    .main-text {
      position: absolute;
      left: 130px;
      top: 200px;
    }

    .sub-text {
      position: absolute;
      left: 165px;
      top: 400px;
    }

    .decoration {
      position: absolute;
      display: inline-block;
      top: 0;
      left: 0;
      -moz-user-select: none;
      -webkit-user-select: none;
      -ms-user-select: none;
      user-select: none;
      -webkit-user-drag: none;
    }
  }
}



.form-container {
  padding: 10px 10px 10px 10px;
  margin: 0 auto;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  position: relative;

  :deep(.el-form--inline .el-form-item) {
    margin-right: 0;
    margin-bottom: 20rpx;
  }
}

.forms {
  border: 1px solid #ddd;
  display: inline-block;
  width: 460px;
  border-radius: 8px;
  margin-left: 40rpx;
  padding: 10px;

  :deep(textarea) {
    width: 100% !important;
  }

  :deep(input) {
    width: 100% !important;
  }
}

.bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: column;
  padding: 10px;
  border: 1px solid #ddd;
  display: inline-block;
  width: 260px;
  border-radius: 8px;
  margin-left: 40rpx;
}

.btn-container {
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.btns {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  // flex-direction: column;
  margin: 0 20px;

  .operate-button {
    margin-top: 10px;
    flex: 1;
  }
}

.step-img {
  width: 100px;
  height: 100px;
}

.vip-header {
  margin-top: 40rpx;
  color: #834f1d;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;

  .title {
    font-size: 54rpx;
    font-weight: bold;
  }

  .desc {
    font-size: 24rpx;
  }
}

.sub-text_bg {
  background: #fff;
  z-index: 1;
  text-align: center;
}

.drag-tips {
  position: absolute;
  font-size: 16px;
  padding: 10px 20px;
  display: flex;
}

.flex-space {
  display: flex;
  align-items: center;
  justify-content: space-around;
}
</style>